<template>
  <view class="footer_nav">
	
	  <view class="footer_nav" :style="{ position: headerPosition,bottom:bottom,opacity: afterHeaderOpacity }">
		<view class="footer_list">
			<view class="flex-item icon-btn" @tap="toIndex">
				<view class="icon" >
				    <image mode="widthFix" :src="home_logo"></image>
				</view>
				<view :style="{ color: choose_color_index }">首页</view>
			</view>
		</view>
		<view class="footer_list">
			<view class="flex-item icon-btn" @tap="toCopoun">
				<view class="icon" >
				    <image mode="widthFix" :src="copoun_logo"></image>
				</view>
				<view :style="{ color: choose_color_copoun }">优惠券</view>
			</view>
		</view>
		<!-- <view class="footer_list">
			<view class="flex-item icon-btn">
				<view class="icon" @tap="toactivity">
				    <image mode="widthFix" :src="activity_logo"></image>
				</view>
				<view>活动专区</view>
			</view>
		</view> -->
		<view class="footer_list">
			<view class="flex-item icon-btn" @tap="toCenter">
				<view class="icon" >
				    <image mode="widthFix" :src="my_logo"></image>
				</view>
				<view :style="{ color: choose_color_my }">我的</view>
			</view>
		</view>
	  </view>
	
  </view>
</template>

<script>
	export default{
		data() {
			return{
				afterHeaderOpacity: 1,//不透明度
				headerPosition: 'fixed',
				bottom:0,
				backpage:'../login/login?backpage=' + '../pages/index/index',
				islogin:'false',
				headimg:'../../static/img/copoun/person_icon.png',
				home_logo:'../../static/img/copoun/home_logo.png',
				my_logo:'../../static/img/copoun/my_logo.png',
				copoun_logo:'../../static/img/copoun/copoun_logo.png',
				activity_logo:'../../static/img/copoun/activity_logo.png',
				choose_color_my:'#000',
				choose_color_index:'#000',
				choose_color_copoun:'#000',
			}
		},
		mounted() {
			let token=uni.getStorageSync("token_h5")
			console.log(this.$route.path)
			if(token){
				 this.headimg='../../static/img/copoun/head_img.png';
			 }
			else{
				  this.headimg='../../static/img/copoun/person_icon.png';
			}
			if(this.$route.path=="/pages/Index/index"||this.$route.path=="/"){
			  this.choose_color_index='#ff685a'
			}
			if(this.$route.path=="/pages/copoun/copoun"||this.$route.path=="/pages/copoun/copoun-list"){
			  this.choose_color_copoun='#ff685a'
			}
			if(this.$route.path=="/pages/user/user"){
			  this.choose_color_my='#ff685a'
			}
		},
		methods:{
			toCenter(){
				let token=uni.getStorageSync("token_h5")
				if(token){
					 this.headimg='../../static/img/copoun/head_img.png';
					uni.navigateTo({
						url: '../user/user'
					});
				}
				else{
					this.headimg='../../static/img/copoun/person_icon.png';
					uni.navigateTo({
						url: '../login/login'
					});
				}
			},
			toIndex(){
				uni.navigateTo({
					url: '../Index/index'
				});
				
			},
			toCopoun(){
				uni.navigateTo({
					url: '../copoun/copoun-list'
				});
				
			},
			toactivity(){
				uni.navigateTo({
					url: '../activity/activity'
				});
				
			}
			
		}
	}
</script>

<style lang="scss">
	.footer_nav {
		width: 100%;
		padding: 1% 0;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		z-index: 10;
		background-color: #fff;
		border-top:1px solid #e1e1e1;
		.footer_list{
			width: 50%;
			 line-height: 15px;
			.icon-btn {
				width: 95%;
				flex-shrink: 0;
				display: block;
				text-align: center;
				.icon {
					width: 55upx;
					height: 55upx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					margin: 0 auto;
					padding-right: 3px;
					image{
						width: 90%;
						height: 90%;
					}
				}
			}
		}
	}
	
</style>
